<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header />
    <div class="page-main">
      <!-- 表格 -->
      <el-tabs>
        <el-tab-pane label="当日失败服务">
          <el-table :data="svcData" style="width: 100%">
            <el-table-column prop="svcName" label="所属服务" />
            <el-table-column prop="appName" label="所属应用" />
            <el-table-column prop="svcOwner" label="服务负责人" />
            <el-table-column prop="subscribeApp" label="订阅应用" />
            <el-table-column prop="subscriber" label="订阅者" />
            <el-table-column prop="failureCount" label="失败次数" /> </el-table
        ></el-tab-pane>
        <el-tab-pane label="当日失败事件">
          <el-table :data="evtData" style="width: 100%">
            <el-table-column prop="evtName" label="所属事件" />
            <el-table-column prop="appName" label="所属应用" />
            <el-table-column prop="subscriber" label="订阅负责人" />
            <el-table-column prop="subscriber" label="订阅应用" />
            <el-table-column prop="failureCount" label="失败次数" /> </el-table
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="jsx" setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, reactive, onMounted, defineComponent } from "vue";
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import FilterBar from "@/components/FilterBar.vue";
import { useRouter } from "vue-router";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { getFailureServieList, getFailureEventList } from "@/api/service";
import { getAppPageList } from "@/api/application.js";
import { getOrgTree } from "@/api/system";
const router = useRouter();
const svcData = ref([]);
const evtData = ref([]);
const handleQuery = async () => {
  let { data } = await getFailureServieList();
  svcData.value = data;
  let res = await getFailureEventList();
  evtData.value = res.data;
};

onMounted(() => {
  handleQuery();
});
</script>
